<template>
	<view class="content"> 
		<!-- 修改昵称 签名 --> 
		<view class="">
			<view class="u-m-30">
				<view class="flex align-center u-p-x-20 rounded-8" style="background-color: #eeeeee;">
					<text class="u-m-r-40 u-font-26">昵称：</text>
					<u-input v-model="value" type="text" :border="false" :placeholder="userInfo.nickname"/>
				</view>
				<view class="u-p-y-20">4-20个字符，可由英文、数字组成</view>
			</view>
		</view>
    <dy-button class="u-p-t-50" size="default" width="576rpx" @click="changeNick">确认</dy-button>
	</view> 
</template>

<script>
	import { BaseCenterApi } from '@/api/serves.js'
	export default {
		data() {
			return {
				value: '',
				reg:/^[A-Za-z0-9]+$/
			}
		},
		watch:{
			value(val,old){
				if(val && !this.reg.test(val)){
					this.$nextTick(()=>{
						this.value = old
					})
				} 
			}
		},
		methods: {
			// 修改昵称
			changeNick() {
				console.log(this.value);
				if(!this.$u.test.rangeLength(this.value, [4, 20])) return this.$Toast("请输入正确的昵称")
				this.$ShowLoading()
				BaseCenterApi.changenick({nickname: this.value}).then(res=> {
					console.log('修改昵称', res);
					this.$HideLoading()
					this.$Toast(res.msg)
					if(res.code == 1) {
						this.$store.dispatch('user/getUserInfo')
						setTimeout(()=> {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>
